<template>
    <div class="main" v-if="isShow">
        <div class="title">
            <div @click="handClose">{{ isLogOrReg ? "账号登录" : "账号注册" }}</div>
            <i class="el-icon-close"></i>
        </div>
        <div class="input-box">
            <i class="el-icon-mobile"></i>
            <input v-model="userCount" type="number" placeholder="请输入手机号">
        </div>
        <div class="input-box">
            <i class="el-icon-key"></i>
            <input v-model="password" type="password" placeholder="请输入密码">
        </div>
        <div class="input-box" v-if="!isLogOrReg">
            <i class="el-icon-key"></i>
            <input v-model="checkPassword" type="password" placeholder="请确认密码">
        </div>
        <div class="btn" @click="login">
            {{ isLogOrReg ? "登录" : "注册/登录" }}
        </div>
        <div class="registe" @click="changeToReg">
            没有账号？先注册
        </div>
        <div class="agrment">
            登录即代表您同意 《siren用户协议》
        </div>
    </div>
</template>

<script>
import { Login, Register } from '../api/HomeApi'

export default {
    data() {
        return {
            userCount: '', //账号
            password: '',  // 密码
            checkPassword: '', // 确认密码
            isLogOrReg: true // 判断是登录还是注册
        }
    },
    props: {
        // 控制显示登录弹窗
        isShow: {
            type: Boolean,
            default: false
        }
    },
    watch: {
    },
    mounted() {
        // window.addEventListener("wheel", (e) => {
        //     e.preventDefault();
        // }, {
        //     passive: false
        // })
    },
    destroyed() {
        // window.removeEventListener("wheel", (e) => {
        //     e.preventDefault();
        // })
    },
    methods: {
        // 关闭弹窗
        handClose() {
            this.$emit('close')
        },
        // handleStopWheel(e) {
        //     e.preventDefault();
        // }
        // 登录方法
        login() {
            if (!this.isLogOrReg) {
                this.register()
                return
            }
            if (this.userCount.length !== 11) {
                this.$message.error('请输入正确电话号码');
                return
            }
            if (this.password.length === 0) {
                this.$message.error('请输入密码');
                return
            }
            let data = {
                userCount: this.userCount,
                password: this.password
            }
            Login(data).then(res => {
                console.log(res);
                if (res.data.error) {
                    this.$message.error(res.data.error)
                }
                else {
                    console.log(res.data, '222222222222222222222222');
                    this.$message.success('登录成功')
                    this.handClose()
                    // 设置本地存储登录态
                    localStorage.setItem('isLogin', true)
                    localStorage.setItem('userId', res.data[0].userId)
                    localStorage.setItem('userLevel',res.data[0].userLevel)
                    let teamIdList = res.data[0].teams.map((item) => {
                        return item.teamId
                    })
                    // let teamNameObject = res.data[0].teams.map((item) => {
                    //     return item.teamName
                    // })
                    let resList = res.data[0].teams
                    let teamNameList = []
                    for (let i = 0; i < resList.length; i++) {
                        let data = {}
                        data.teamName = resList[i].teamName
                        data.teamId = resList[i].teamId
                        teamNameList.push(data)
                    }
                    console.log(teamNameList, 'teamNameListteamNameListteamNameList');
                    localStorage.setItem('userTeamId', JSON.stringify(teamIdList))
                    localStorage.setItem('teamNameList',JSON.stringify(teamNameList))
                    console.log(this.$store.state.teamNameList, 'this .si sdadasd');
                }
            })
        },
        // 注册方法
        register() {
            if (this.password !== this.checkPassword) {
                this.$message.error('两次输入的密码不一致')
                return;
            }
            let data = {
                userCount: this.userCount,
                password: this.password
            }
            Register(data).then(res => {
                this.$message.success('登录成功')
                this.handClose()
                // 设置本地存储登录态
                localStorage.setItem('isLogin', true)
                localStorage.setItem('userTeamId', res.data.teamId)
            })
        },
        // 切换登录和注册
        changeToReg() {
            this.isLogOrReg = !this.isLogOrReg
        }
    },

}

</script>

<style scoped>
.main {
    background: #DCDFE6;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 11;
    width: 250px;
    border-radius: 10px;
    padding: 10px 30px 30px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title {
    text-align: center;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.input-box {
    display: flex;
    border: 1px solid #EFF2FF;
    border-radius: 5px;
    margin-top: 20px;
    background: #ffff;
    align-items: center;
    padding-left: 5px;
    width: 100%;
}

.input-box input {
    flex: 1;
    border: none;
    padding: 10px;
    outline: none;
}

.btn {
    padding: 15px 0;
    font-size: 18px;
    margin: 30px 0 0 0;
    color: #ffff;
    background: #1467cc;
    width: 100%;
    text-align: center;
    border-radius: 5px;
}

.registe {
    color: #409eff;
    font-size: 10px;
    margin-top: 15px;
    margin-left: auto;
}

.agrment {
    color: #999;
    font-size: 10px;
    margin-top: 30px;
}
</style>